<template>
  <!-- 审计署统计表-02表 -->
  <j-modal
    :title="'报表审批'"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    :fullscreen="true"
    @close="close"
    cancelText="关闭"
  >
    <template slot="footer">
      <a-button key="back" style="padding-left: 20px; padding-right: 20px" @click="close()"> 关闭 </a-button>
      <a-popconfirm title="确定不通过吗?" style="width: 150px" @confirm="() => setApproveReason('2')">
        <a-button key="save" style="padding-left: 8px; padding-right: 8px"> 不通过 </a-button>
      </a-popconfirm>
      <a-popconfirm title="确定通过吗?" style="width: 150px" @confirm="() => setApproveReason('3')">
        <a-button key="submit" type="primary"> 通过 </a-button>
      </a-popconfirm>
    </template>
    <a-spin :spinning="Loading">
      <div :class="{ isCheck: isCheck }">
        <div class="table-header table-header-filx">
          <div class="table-side-title">
            {{ title }}
          </div>
          <a-form-model
            class="table-title table-left"
            ref="form1"
            :rules="validatorRules"
            layout="inline"
            :model="fromModel"
          >
            <a-form-model-item label="统一社会信用代码：" prop="tyshxydm">
              <span>{{ fromModel.tyshxydm }}</span>
            </a-form-model-item>
            <a-form-model-item label="单位详细名称：" prop="officeName">
              <span>{{ fromModel.officeName }}</span>
            </a-form-model-item>
            <!-- <a-form-model-item label="填表时间：" prop="">
              <span>{{ model.createTime }}</span>
              </a-form-model-item> -->
          </a-form-model>
          <a-form-model
            class="table-title"
            style="width: 465px"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            ref="form1"
            :rules="validatorRules1"
            :model="tableHeard"
          >
            <a-form-model-item label="表    号:" prop="bh">
              <span>{{ tableHeard.bh }}</span>
            </a-form-model-item>
            <a-form-model-item label="制定机关：" prop="zdjg">
              <span>{{ tableHeard.zdjg }}</span>
            </a-form-model-item>
            <a-form-model-item label="批准机关：" prop="pzjg">
              <span>{{ tableHeard.pzjg }}</span>
            </a-form-model-item>
            <a-form-model-item label="批准文号：" prop="pzwh">
              <span>{{ tableHeard.pzwh }}</span>
            </a-form-model-item>
            <a-form-model-item label="有效期至：" prop="yxq">
              <span>{{ tableHeard.yxq }}</span>
            </a-form-model-item>
          </a-form-model>
        </div>
        <a-table
          class="edit-list"
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
        >
        </a-table>
        <div class="table-header">
          <a-form-model class="table-title" ref="form2" :rules="validatorRules" layout="inline" :model="fromModel">
            <a-form-model-item label="统计负责人:" prop="tjfzr">
              <span>{{ fromModel.tjfzr }}</span>
            </a-form-model-item>
            <a-form-model-item label="联系电话:" prop="tel">
              <span>{{ fromModel.tel }}</span>
            </a-form-model-item>
            <a-form-model-item label="填表人:" prop="">
              {{ model.createByText }}
            </a-form-model-item>
            <a-form-model-item label="填表时间：" prop="">
              {{ model.createTime }}
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
    </a-spin>
    <SetReason ref="setReason" @approveData="approveData"></SetReason>
  </j-modal>
</template>

<script>
import { httpAction, getAction, postAction, deleteAction } from '@/api/manage'
import SetReason from '../SetReason'
import { BbspModelMixin } from './BbspModelMixin'
import columns from './columns8'
export default {
  mixins: [BbspModelMixin],
  components: {
    SetReason,
  },
  data() {
    return {
      columns: columns(),
      sjType: '6',
      state: '1',
      fromModel: {
        tyshxydm: '',
        officeName: '',
        tjfzr: '',
        tel: '',
      },
      tableHeard: {},
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      model: {},
      title: '单位内部审计业务情况表',
      url: {
        list: '/sjxxzhbb/sjsbb/queryReportDwywqkById',
        approve: '/common/sjProcCommon/auditApply',
      },
      validatorRules: {
        tyshxydm: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
        officeName: [{ required: true, message: '请输入单位详细名称', trigger: 'blur' }],
        tjfzr: [{ required: true, message: '请输入填表人姓名', trigger: 'blur' }],
        tel: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
      },
      validatorRules1: {
        bh: [{ required: true, message: '请输入表号', trigger: 'blur' }],
        zdjg: [{ required: true, message: '请输入制定机关', trigger: 'blur' }],
        pzjg: [{ required: true, message: '请输入批准机关', trigger: 'blur' }],
        pzwh: [{ required: true, message: '请输入批准文号', trigger: 'blur' }],
        yxq: [{ required: true, message: '请输入有效期至', trigger: 'blur' }],
      },
    }
  },
  methods: {
    // 审批
    approve(record) {
      this.Loading = true
      this.model = Object.assign({}, record)
      this.visible = true
      this.getTableData()
    },
    getTableData() {
      getAction(this.url.list, { auditId: this.model.id }).then((res) => {
        if (res.success) {
          this.model.year = res.result.year
          this.model.quarter = res.result.quarter
          this.model.createByText = res.result.createByText

          this.fromModel.tjfzr = res.result.tjfzr
          this.fromModel.tyshxydm = res.result.tyshxydm
          this.fromModel.officeName = res.result.officeName
          this.fromModel.tel = res.result.tel

          this.tableHeard.bh = res.result.bh
          this.tableHeard.zdjg = res.result.zdjg
          this.tableHeard.pzjg = res.result.pzjg
          this.tableHeard.pzwh = res.result.pzwh
          this.tableHeard.yxq = res.result.yxq
          this.dataSource = JSON.parse(res.result.info)
        }
        this.Loading = false
      })
    },
    approveData(data) {
      this.Loading = true
      getAction(this.url.approve, {
        proId: this.model.id,
        state: this.approveType,
        sjType: this.sjType,
        reason: data,
      }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.Loading = false
          this.visible = false
          this.$emit('ok')
        } else {
          this.$message.error(res.message)
          this.Loading = false
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '../../../css/checkAndEdit.less';
.input-title {
  height: 30px !important;
}
.table-header {
  margin-bottom: 10px;

  .table-title {
    font-weight: bold;
    margin-left: 15px;
  }
}
.table-header-filx {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  .table-side-title {
    position: absolute;
    font-size: 34px;
    color: #666;
    font-weight: 600;
    top: calc((100% - 60px) / 2);
    left: calc((100% - 465px) / 2);
    transform: translate(-50%, -50%);
  }
  .table-left {
    width: 1200px;
    /deep/.ant-form-item-with-help {
      margin-bottom: 0;
    }
  }
}
</style>